<template>
  <div class="login">
    <div class="login-box">
      <!-- 头部logo标题 -->
      <div class="login-header">
        <img src='../../assets/image/logo.webp' alt="logo" width="20%">
        <span>学业导师助手</span>
      </div>
      <!-- Login表单元素 -->
       <el-form
       ref="loginFormRef"
       :model="loginForm"
       :rules="loginRules"
       style="width: 60%; margin-left: 30px;"
       >
         <div class="login-user">
          <el-icon class="login-icon"><User /></el-icon>
          <el-form-item prop="userId" style="width: 80%;">
            <el-input v-model="loginForm.userId" style="width:100%;margin-top: 10px; " placeholder="请输入学号/工号" />
          </el-form-item>
         </div>
         <div class="login-password">
          <el-icon class="login-icon"><Lock /></el-icon>
          <el-form-item prop="password" style="width: 80%;margin-top: 10px;">
            <el-input
               v-model="loginForm.password"
               style="width: 100%"
               type="password"
               placeholder="请输入密码"
               show-password
             />
          </el-form-item>
         </div>
        <el-checkbox v-model="loginForm.remember" style="margin-left: 10px; color: #fff;">记住密码</el-checkbox>
        <el-form-item>
         <el-button 
         style="width: 92%; height: 40px; font-size: 18px;margin-left: 10px; margin-top: 20px;
          border-radius: 15px; background-color: #e43535; border: 0;"
         type="primary" @click="submitLogin(loginFormRef)">
           登录
         </el-button>
        </el-form-item>
       </el-form>

    </div>
  </div>
</template>

<script setup>
import router from '@/router';
import { Lock, User } from '@element-plus/icons-vue';
import { ref,reactive } from 'vue'
import { useLoginStore } from '@/stores/login';
import { ElMessage } from 'element-plus';


const loginStore = useLoginStore()

const loginFormRef = ref()
const loginForm = ref({
  userId: '',
  password: '',
  remember:false,
})



const loginRules = reactive({
  userId: [
    { required: true, message: '请输入您的学号或者工号', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '*密码错误',
      trigger: 'blur',
    },
  ],
})

const submitLogin = async (formEl) => {
  // if (!formEl) return
  // await formEl.validate(async (valid, fields) => {
  //   if (valid) {
  //     try {
  //       const role = await loginStore.loginRequest(loginForm.value)
  //       console.log(role)
  //       switch(role) {
  //         case 'STUDENT':
  //           router.push('/student')
  //           break
  //         case 'TEACHER':
  //           router.push('/mentor')
  //           break
  //         case 'ADMIN':
  //           router.push('/administrator')
  //           break
  //         case 'SUPERADMIN':
  //           router.push('/superAdministrator')
  //           break
  //         default:
  //           ElMessage.error('未知用户角色，请联系管理员')
  //           break
  //       }
        
  //       console.log('登录成功，用户角色:', role)
  //     } catch (error) {
  //       console.log('登录失败:', error)
  //       ElMessage.error('登录失败，请检查账号密码')
  //     }
  //   } else {
  //     console.log('表单验证失败:', fields)
  //   }
  // })
}
</script>

<style scoped lang="scss">
.login {
  min-width: 500px;
  min-height: 400px;
  width: 100vw;
  height: 100vh;
  background: url('../../assets/image/login_bg.webp') no-repeat;
  background-size: cover;
  display: flex;
  justify-items: center;

  .login-box {
    min-width: 500px;
    min-height: 400px;
    width: 50vw;
    height: 50vh;
    margin: auto;
    background-color: #0000009d;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    // 头部logo
    .login-header {
      height: 25%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      span {
        margin-left: -20px;
        font-size: 36px;
        color: #ec0101;
        margin-top: 10px;
      }
    }
    // 表单元素
    .login-user,.login-password {
      width: 90%;
      margin: 10px;
      border: white solid 1px;
      border-radius: 8px;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      
      :deep(.login-icon) {
        font-size: 30px;
        color: white;
      }
    }


  }
}
</style>